<template>
  <section class="container">
    <div class="flex stepy-list" v-if="stepy != 1 && stepy < 7 && stepy != 0">
      <a v-bind:class="{active:stepy === 2,overby:stepy>2}" v-on:click="goThrough(2)">品牌选择</a><i v-bind:class="{overby:stepy>2}"></i>
      <a v-bind:class="{active:stepy === 3,overby:stepy>3}" v-on:click="goThrough(3)">型号选择</a><i v-bind:class="{overby:stepy>3}"></i>
      <a v-bind:class="{active:stepy === 4,overby:stepy>4}" v-on:click="goThrough(4)">骑行状态</a><i v-bind:class="{overby:stepy>4}"></i>
      <a v-bind:class="{active:stepy === 5,overby:stepy>5}" v-on:click="goThrough(5)">电机评估</a><i v-bind:class="{overby:stepy>5}"></i>
      <a v-bind:class="{active:stepy === 6}">轮圈评估</a>
    </div>
    <transition name="slide-fade">
      <div class="screen"  v-if="stepy === 2">
        <div class="view">
          <ul class="brand">
            <li v-for="item in questions[0].options">
              <a v-bind:class="{active:item.selected}" v-on:click="singleCheck(questions[0].options,item)"  >
                <img v-if="item.linkurl" :src="item.linkurl" :title="item.text" >
                <span v-if="!item.linkurl"  v-text="item.text" ></span>
              </a>
            </li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div class="screen"  v-if="stepy === 3">
        <div class="view">
          <ul class="question two">
            <li v-for="item in questions[1].options"><a v-bind:class="{active:item.selected}" v-on:click="singleCheck(questions[1].options,item);" v-text="item.text"></a></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div class="screen"  v-if="stepy === 4">
        <div class="view">
          <ul class="question">
            <li><img src="../styles/asset/tyre.jpg" class="question_imgClass"></li>
          </ul>
          <ul class="question">
            <li v-for="item in questions[2].options"><a v-bind:class="{active:item.selected}" v-on:click="singleCheck(questions[2].options,item);" v-text="item.text"></a></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div class="screen"  v-if="stepy === 5">
        <div class="view">
          <ul class="question">
            <li><img src="../styles/asset/machine.jpg" class="question_imgClass"></li>
          </ul>
          <ul class="question">
            <li v-for="item in questions[3].options"><a v-bind:class="{active:item.selected}" v-on:click="singleCheck(questions[3].options,item);" v-text="item.text"></a></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="slide-fade">
      <div class="screen"  v-if="stepy === 6">
        <div class="view">
          <ul class="question">
            <li><img src="../styles/asset/Hub.jpg" class="question_imgClass"></li>
          </ul>
          <ul class="question">
            <li v-for="item in questions[4].options"><a v-bind:class="{active:item.selected}" v-on:click="singleCheck(questions[4].options,item);" v-text="item.text"></a></li>
          </ul>
        </div>
      </div>
    </transition>
    <transition name="fade-in">
      <div class="screen screenFull" v-if="stepy === 7">
        <div class="recyclem recycle_d">
          <div class="detail">
            <div class="brandafter"><img class="logosmall" :src="brand.url?brand.url:require('../styles/asset/other.jpg')" /><span>{{brand.text}}</span>电动车</div>
            <p>评估价格</p>
            <p class="price">{{score}}<small>元</small></p>
            <p>最终价格以工作人员现场评估为准</p>
            <a class="btnabs"  v-on:click="clear(); stepy = 2">重新评估 <span> </span></a>
          </div>
          <div class="detail_assess">
            <h3>评估详情</h3>
            <ul class="items">
              <li v-for="item in filteRedoption" ><a  v-text="item.text"></a></li>
            </ul>
          </div>
          <div class="detail_assess">
            <h3>回收流程</h3>
            <div class="thumbnail">
              <img :src="require('../styles/asset/step.png')"/>
            </div>
          </div>
          <div class="detail_assess" style="overflow: hidden;">
            <h3>我的信息<!--<router-link :to="{ path: '/recycle/userInfo' }" class="blocka" ><span class="pull-right myInfoList" >{{vTextFn}}</span></router-link>--></h3>
            <div class="form">
              <div class="flex">
                <label>您的姓名</label>
                <input type="text" placeholder="请填写姓名" v-model="username" ref="username" />
              </div>
              <div class="flex">
                <label>联系电话</label>
                <input type="text" placeholder="请填写手机号码" v-model="phone" ref="phone" />
              </div>
              <div class="flex clearborder">
                <label>详细地址</label>
                <input type="text" placeholder="请填写详细地址" v-model="address" ref="address" />
              </div>
            </div>
          </div>
          <div class="detail_assess" style="padding-bottom: 0.2rem;">
            <h3>成交方式</h3>
            <div class="userInfo">
              <p>六个轮子平台将把评估金额打入您的APP钱包，当做赠送金额，以供您骑行使用</p>
            </div>
          </div>
        </div>
        <div class="static-button">
          <!--<router-link to="/recycle/list" tag="a" class="btn">申请回收</router-link>-->
          <a class="btn" v-on:click="submitOrder(filteRedoption)">申请回收</a>
        </div>
      </div>
    </transition>
    <transition name="slide-fade-m">
      <div class="popbg" v-if="alert.key">
        <div class="modal" v-if="alert.value == 'success'">
          <div class="thumbnail">
            <img src="../styles/asset/success.png" />
          </div>
          <p v-text="alert.msg"></p>
        </div>
        <div class="modal" v-if="alert.value == 'fail'"  >
          <div class="thumbnail">
            <img src="../styles/asset/fail.png" />
          </div>
          <p v-text="alert.msg"></p>
        </div>
      </div>
    </transition>
    <simplert  ref="simplert"></simplert>
  </section>
</template>
<script>
  import Simplert from '../../components/dialog/dialog.vue'

  let filters = {
    selected:function(options){
      return options.filter(function (option) {
        return option.selected
      })
    },
    isselect:function(options){
      let filtervalue = false;
      options.forEach(function(e){
        if(e.selected)
        {
          filtervalue = true
        }
      })
      return filtervalue
    },
    parseURL:function(url) {
      let a = document.createElement('a');
      a.href = url;
      return {
        params: (function () {
          let ret = {},
            param = a.href.split('?')[1],
            seg = param.split('&'),
            len = seg.length,
            i = 0,
            s;
          for (; i < len; i++) {
            if (!seg[i]) {
              continue;
            }
            s = seg[i].split('=');
            ret[s[0]] = s[1];
          }
          return ret;
        })()
      }
    }
  }

  export default{
    data () {
      return {
        lists: [],
        questions:[{
          options:[
            {text:"小刀",value:0,selected:false,linkurl:require('../styles/asset/logoxd.jpg')},
            {text:"爱玛",value:0,selected:false,linkurl:require('../styles/asset/logoam.jpg')},
            {text:"雅迪",value:0,selected:false,linkurl:require('../styles/asset/logoyd.jpg')},
            {text:"新日",value:0,selected:false,linkurl:require('../styles/asset/logoxr.jpg')},
            {text:"绿源",value:0,selected:false,linkurl:require('../styles/asset/logoly.jpg')},
            {text:"新大洲",value:0,selected:false,linkurl:require('../styles/asset/logoxdz.jpg')},
            {text:"速派奇",value:0,selected:false,linkurl:require('../styles/asset/logospq.jpg')},
            {text:"台铃",value:0,selected:false,linkurl:require('../styles/asset/logotl.jpg')},
            {text:"小鸟",value:0,selected:false,linkurl:require('../styles/asset/logoxn.jpg')},
            {text:"比德文",value:0,selected:false,linkurl:require('../styles/asset/logobdw.jpg')},
            {text:"洪都",value:0,selected:false,linkurl:require('../styles/asset/logohd.jpg')},
            {text:"宝岛",value:0,selected:false,linkurl:require('../styles/asset/logobd.jpg')},
            {text:"立马",value:0,selected:false,linkurl:require('../styles/asset/logolm.jpg')},
            {text:"其他品牌",value:0,selected:false,linkurl:false}
          ]
        },{
          options:[
            {text:"简易款 48V12AH",value:210,selected:false,type:2},
            {text:"简易款 48V20AH",value:310,selected:false,type:2},
            {text:"简易款 60V20AH",value:372,selected:false,type:2},
            {text:"豪华款 48V12AH",value:250,selected:false,type:1},
            {text:"豪华款 48V20AH",value:350,selected:false,type:1},
            {text:"豪华款 64V14AH",value:340,selected:false,type:1},
            {text:"豪华款 60V20AH",value:412,selected:false,type:1},
            {text:"豪华款 64V20AH",value:430,selected:false,type:1},
            {text:"豪华款 72V20AH",value:475,selected:false,type:1}
          ]
        },{
          options:[
            {text:"能正常骑行",value:0,selected:false,dis:0},
            {text:"不能正常骑行",value:-15,selected:false,dis:-20}
          ]
        },{
          options:[
            {text:"电机完好",value:0,selected:false,dis:-0},
            {text:"电机损坏或缺失",value:-30,selected:false,dis:-50},
          ]
        },{
          options:[
            {text:"铝合金",value:0,selected:false},
            {text:"非铝合金",value:-10,selected:false},
          ]
        }],
        showform: false,
        vText: "请填写",
        value : 0,
        stepy : 2,
        areaList: [],
        localS: false,
        alert: {
          key: false,
          value: 'success',
          msg:""
        },
        token:"",
        areaCode:"",
        postState:false,
        username : "",
        phone: "",
        address: "",
      }
    },
    created () {
    },
    computed: {
      filteRedoption:function(){
        let sel = [];
        this.questions.forEach(function(e){
          sel = sel.concat(filters.selected(e.options))
        })
        sel.shift()
        return sel
      },
      score:function(){
        let valuea = 0;
        if(filters.selected(this.questions[1].options)[0].type === 2)
        {
          this.value = valuea+parseInt(filters.selected(this.questions[1].options)[0].value) + parseInt(filters.selected(this.questions[2].options)[0].value) + parseInt(filters.selected(this.questions[3].options)[0].value + parseInt(filters.selected(this.questions[4].options)[0].value))
        }else{
          this.value = valuea+parseInt(filters.selected(this.questions[1].options)[0].value) + parseInt(filters.selected(this.questions[2].options)[0].dis) + parseInt(filters.selected(this.questions[3].options)[0].dis + parseInt(filters.selected(this.questions[4].options)[0].value))
        }
        this.value = this.value * 2
        return this.value
      },
      brand:function(){
        return {
          text:filters.selected(this.questions[0].options)[0].text,
          url:filters.selected(this.questions[0].options)[0].linkurl
        }
      },
    },
    mounted(){
      const that = this;
      const url = window.location.href;
      this.areaCode = filters.parseURL(url).params.cityId;
      this.$util.getUserToken().then(token=>{
        that.token = token;
      })
    },
    components: {
      Simplert
    },
    methods: {
      clear(){
        this.questions.forEach(function(e){
          filters.selected(e.options).forEach(function(e){
            e.selected = false
          })
        });
      },
      getInfo(){
        this.$api.post('/reclaim/v1/authApi/reclaimUserInfo','',s=>{
          this.username = s.module.realName;
          this.phone = s.module.phone;
        },f=>{
          this.openMessage(f.errorMessage,'','fade_alert')
        },{
          "token": this.token
        })
      },
      submitInfo(){
        if(this.username==='')
        {
          this.openMessage('请输入姓名','','fade_alert');
          return false;
        }
        if(this.phone==='')
        {
          this.openMessage('请输入手机号码','','fade_alert');
          return false;
        }
        let pat = /^1\d{10}$/; //手机号码1开头
        if (!pat.test(this.phone)) {
          this.openMessage('手机号码格式不正确','','fade_alert');
          return false;
        }
        if(this.address==='')
        {
          this.openMessage('请输入地址','','fade_alert');
          return false;
        }
        return true;
      },
      openMessage(title, message, type) {
        let obj = {
          title: title,
          message: message,
          type: type
        }
        this.$refs.simplert.openSimplert(obj)
      },
      submitOrder(params){
        if(!this.submitInfo())
        {
          return false
        }
        if(this.postState){
          return
        }else{
          this.postState = true;
        }
        let brand = [this.brand];
        brand[0].url = "";
        this.lists = brand.concat(params);
        params = JSON.stringify(this.lists);
        let url = encodeURI('/reclaim/v1/authApi/saveReclaim?areaCode='+this.areaCode+'&evalDetail='+params+'&evalAmount='+this.value+'&linkName='+this.username+'&linkPhone='+this.phone+'&linkAddr='+this.address);
        this.$api.post(url,'',s=>{
          this.alert.key = true;
          this.alert.value = "success";
          this.alert.msg = "申请回收成功！";
          this.postState = false;
          setTimeout(() => {
            this.clear();
            this.stepy = 2;
            this.alert.key = false;
            if(navigator.userAgent.match(/Android/i)){
              window.control.toJumpOrderInfo();
            }else if(navigator.userAgent.match(/iPhone/i))
            {
              this.$router.push({ path: '/recycle/list' })
            }
          }, 2000)
        },f=>{
          this.alert.key = true;
          this.alert.value = "fail";
          this.alert.msg = f.errorMessage;
          this.postState = false;
          setTimeout(() => {
            this.alert.key = false;
          }, 2000)
        },{
          "token": this.token
        })
      },
      goThrough(n){
        if(this.stepy>n)
        {
            this.stepy = n;
        }
      },
      singleCheck(options,item){
        let self = this;
        options.forEach(function(e){
          e.selected = false;
        })
        item.selected = true;
        if(this.stepy === 6)
        {
          this.getInfo();
        }
        setTimeout(() => {
          this.stepy ++;
        }, 100)
      },
    }
  }
</script>
<style scoped>
  @import "../styles/styles.css";
  #app{ width: 100%; height: 100%;}
  a,p,h3{font-size: 14px;}
  .container,.screen{ position: relative; width: 100%; height: 100%; background: #f5f5f5;}
  .screen{ height: auto;}
  .screenFull{ height: 100%; padding-bottom: 1rem; }
  .recyclem{ position: relative; height: 100%; padding-bottom: 1rem; overflow-y: scroll; background-color: #dedede;}
  .recycle_d{ background-color: #f5f5f5; padding-bottom: 0; box-sizing: border-box;}
  .recyclem>img{ width: 100%;}
  .recyclem h1{ text-align: center; padding: 0.2rem 0;}
  .recyclem p.logo{ margin-bottom: 0.1rem; padding:0.2rem; position: absolute;  top:0; left: 0; z-index: 121;}
  .static-button{ position:absolute; bottom: 0; left: 0; right: 0; width: 100%; display: block; z-index: 132; height: 1rem;}
  .btn{ display: block; width: initial; flex-grow: 2;  height: 1rem; font-weight: 500; text-align: center; line-height: 1rem; font-size: 16px; background: #48a298; color: #fff;}
  .view{ height: 100%; padding-bottom: 1rem; padding-left: 0.2rem; padding-right: 0.2rem; padding-top: 0.2rem; overflow: scroll;}
  .view>p{ margin-bottom: 0.2rem;  padding: 0.1rem 0;}
  .flex{ display: flex;}
  .brand{display: flex;  flex-wrap: wrap;}
  .brand,.question,.items{ margin-left: -0.1rem; margin-right: -0.1rem;}
  .brand>li,.question>li,.items>li{ padding-left: 0.1rem; padding-right: 0.1rem; margin-bottom: 0.2rem;}
  .two>li{ width: 50%; display: inline-block;}
  .brand>li{ display: inline-block; width: 25%; text-align: center; display: flex;  flex-wrap: wrap;}
  .brand>li>a{ padding: 0; background-color: #fff; display: block; border:1px solid transparent;  border-radius: 0.04rem; overflow: hidden; width: 100%;  display: flex;  justify-content: center;  align-items: center;}
  .brand>li>a>img{ width: 100%;}
  .items>li{display: inline-block; }
  .detail_assess>h3>a{ font-weight: bold; color: #333;}
  .items>li>a{ display: block; padding: 0.2rem 0.3rem; border: 1px solid #e5e5e5; border-radius: 0.04rem; line-height: 1.2;}
  .brand a.active,.brand a:active{ border-color:#48a298; }
  .question a{ display: block; border:1px solid #e6e6e6; background-color: #fff;  padding: 0.3rem 0.4rem; border-radius: 0.1rem;}
  .question a.active{ background-color: #48a298; color: #fff; border-color: #48a298;}
  .detail{ background: #48a298 url("../styles/asset/bg1.png") no-repeat top right;  position: relative; background-size: contain; padding: 0.4rem 0.4rem 0.2rem; color: #fff;}
  .btnabs{ position: absolute; right: 0.3rem; bottom: 0.8rem; background-color: #fff; border-radius: 0.08rem; padding:0.04rem 0.12rem;}
  .stepy-list{ justify-content:space-around; align-items: center; flex-wrap: nowrap;  padding: 0.2rem 0.2rem 0.06rem;}
  .stepy-list>a{ background: #d2e4e2; border-radius: 0.8rem; padding: 0.1rem 0; text-align: center; width: 100%; flex-grow:1; display: inline-block; font-size: 12px;}
  .stepy-list>i{
    margin: 0 0.04rem;
    width: 0;
    height: 0;
    border-top: 0.08rem solid transparent;
    border-left: 0.08rem solid #d2e4e2;
    border-bottom: 0.08rem solid transparent;
    border-radius: 0.04rem;
  }
  .stepy-list>a.overby{background: #48a298; position: relative; color: #fff;}
  .stepy-list>i.overby{ border-left-color: #48a298;  color: #fff;}
  .stepy-list>a.active{ background: #48a298; position: relative;  color: #fff;}
  .stepy-list>a.active:after{ content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -0.12rem;
    width: 0;
    height: 0;
    border-left: 0.12rem solid transparent;
    border-right: 0.12rem solid transparent;
    border-top: 0.06rem solid #48a298;
  }
  .btnabs>span:after,.myInfoList:after{
    content: "";
    display: inline-block;
    margin-top: -0.1rem;
    height: 0.12rem;
    width: 0.12rem;
    border-width: 0.04rem 0.04rem 0 0;
    border-color: #333;
    border-style: solid;
    -webkit-transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
    transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
  }
  .blocka{ display: block;}
  .myInfoList:after{border-color: #999; }
  .myInfoList{ font-weight: normal !important; color: #999;}
  .detail>p{ text-align: left; margin-bottom: 0.1rem;}
  .price{ font-size: 70px; line-height:1.2rem; letter-spacing: 0.04rem;}
  .price>small{ font-size: 28px; line-height: 0.6rem; margin-left: 0.04rem;}
  .detail_assess{ padding: 0; margin-top: 0.2rem; background-color: #fff; overflow: hidden;}
  .detail_assess>h3{ font-weight: bold;  padding: 0.2rem; border-bottom: 1px solid #f5f5f5;}
  .detail_assess>h3>span{ color: #626262; font-weight: normal;}
  .detail_assess>p{ margin-bottom: 0.1rem; padding: 0 0.2rem;}
  .detail_assess>.thumbnail,.detail_assess>ul.items{ padding: 0.2rem 0.2rem 0;}
  .thumbnail{ margin-bottom: 0.2rem;}
  .thumbnail>img{ width: 100%;}
  .brandafter{ display: inline-block; font-size: 12px; font-weight: bold; line-height: 0.45rem; height: 0.5rem; border-radius: 0.4rem; padding: 0.04rem 0.16rem 0.04rem 0.04rem; margin-bottom: 0.16rem; background:#fff; color: #333;}
  .brandafter>.logosmall{ border-radius: 50%; float: left; width: 0.4rem; height: 0.4rem; margin-right: 0.1rem;}
  .popbg{ width: 100%; height: 100%; background:rgba(0,0,0,0.5); display:flex; justify-content: center; align-items: center;  position: absolute; top:0; left:0; z-index: 101;}
  .modal{ width: 60%; background: #fff; border-radius: 0.2rem;}
  .modal>.thumbnail{ padding: 0.4rem 0.2rem 0.2rem; text-align: center;}
  .modal>.thumbnail>img{ width: 1.4rem; margin: 0 auto;}
  .modal p{ text-align: center; margin-bottom: 0.3rem; font-size: 0.36rem;}
  .question_imgClass { width:100%;height:100%}
  .slide-fade-m-enter-active {  transition: all .2s ease;  }
  .slide-fade-m-leave-active {  transition: all .3s ease;  }
  .slide-fade-m-enter, .slide-fade-m-leave-active {  opacity: 0;  }
  .marginL2{ margin-left: 0.6rem;}
  .userInfo{padding:0.2rem 0.2rem;}
  .userInfo p{ line-height: 0.4rem;}
  .form{ padding: 0 0.1rem;}
  .flex{ display: flex;}
  .mybtn{ padding: 0.2rem;}
  .form>.flex{ background: #fff; padding: 0; border-bottom: 1px solid #f5f5f5;}
  .form label{ width: auto; flex-grow: 0; color: #333333; font-weight: normal; padding: 0.2rem 0.1rem;}
  .form input{ width: auto; flex-grow: 1; padding: 0.2rem 0.1rem; font-size: 14px; border: none;  }
  .form>.flex.clearborder{ border-color: transparent;}
</style>
